<template>
    <div>
        <el-menu default-active="1-4-1" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
            :collapse="isCollapse">
            <div class="head"><img src="../assets/images/logo.png"><h3>{{isCollapse?'':'ERP管理系统'}}</h3></div> 
            <el-menu-item v-for="item in noChildren" :index="item.path" :key="item.path" @click="clickMenu(item)">
                <i :class="'el-icon-'+item.icon"></i>
                <span slot="title">{{item.label}}</span>
            </el-menu-item>
            <el-submenu v-for="item in hasChildren" :index="String(item.path)" :key="item.path">
                <template slot="title">
                    <i :class="'el-icon-'+item.icon"></i>
                    <span slot="title">{{item.label}}</span>
                </template>
                <el-menu-item-group  v-for="subItem in item.children" :key="subItem.path">
                   <el-menu-item :index="subItem.label" @click="clicSubkMenu(subItem)"><i :class="'el-icon-'+subItem.icon"></i>{{subItem.label}}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </div>
</template>

<script>
export default {
    data() {
        return {
            menu: [
                {
                    path: '/',
                    name: "homepage",
                    label: "首页",
                    icon: "s-home",
                    url: "首页"
                },
                {
                    path: '/user',
                    name: "user",
                    label: "用户管理",
                    icon: "user",
                    url: "用户管理"
                },
                {
                    path: '/setting',
                    name: "setting",
                    label: "系统设置",
                    icon: "setting",
                    url: "系统设置"
                },
                {
                    icon: "pie-chart",
                    label: "统计报表",
                    path: '/statistics',
                    children: [
                        {
                            path: '/supplierstatistics',
                            name: "supplierstatistics",
                            label: "供应商统计",
                            icon: "s-marketing",
                            url: "统计报表 / 供应商统计"
                        },
                        {
                            path: '/customerstatistics',
                            name: "customerstatistics",
                            label: "客户统计",
                            icon: "phone-outline",
                            url: "统计报表 / 客户统计"
                        },
                        {
                            path: '/goodsstatistics',
                            name: "goodsstatistics",
                            label: "商品统计",
                            icon: "data-analysis",
                            url: "统计报表 / 商品统计"
                        },
                    ]
                },
                {
                    icon: "s-data",
                    label: "基础资料管理",
                    path: '/basedata',
                    children: [
                        {
                            path: '/supplier',
                            name: "supplier",
                            label: "供应商管理",
                            icon: "phone",
                            url: "基础资料管理 / 供应商管理"
                        },
                        {
                            path: '/goods',
                            name: "goods",
                            label: "商品管理",
                            icon: "s-goods",
                            url: "基础资料管理 / 供应商管理"
                        },
                        {
                            path: '/stock',
                            name: "stock",
                            label: "仓库信息管理",
                            icon: "s-platform",
                            url: "基础资料管理 / 仓库信息管理"
                        },{
                            path: '/customer',
                            name: "customer",
                            label: "客户管理",
                            icon: "edit-outline",
                            url: "基础资料管理 / 客户管理"
                        },
                        {
                            path: '/other',
                            name: "other",
                            label: "其他管理",
                            icon: "coordinate",
                            url: "基础资料管理 / 其他管理"
                        },
                    ]
                },
                {
                    icon: "s-order",
                    label: "采购管理",
                    path: '/purchasemanage',
                    children: [
                        {
                            path: '/purchaseplan',
                            name: "purchaseplan",
                            label: "采购计划管理",
                            icon: "s-order",
                            url: "采购管理 / 采购计划管理"
                        },
                        {
                            path: '/purchaseorder',
                            name: "purchaseorder",
                            label: "采购订单管理",
                            icon: "s-claim",
                            url: "采购管理 / 采购订单管理"
                        }
                    ]
                },{
                    icon: "takeaway-box",
                    label: "仓库管理",
                    path: '/stockmanage',
                    children: [
                        {
                            path: '/仓库管理/入库管理',
                            name: "enterstock",
                            label: "入库管理",
                            icon: "box",
                            url: "仓库管理 / 入库管理"
                        },
                        {
                            path: '/仓库管理/退货管理',
                            name: "cancelstock",
                            label: "退货管理",
                            icon: "help",
                            url: "仓库管理 / 退货管理"
                        },{
                            path: '/仓库管理/出库管理',
                            name: "checkoutstock",
                            label: "出库管理",
                            icon: "coin",
                            url: "仓库管理 / 出库管理"
                        },
                    ]
                },{
                    icon: "s-custom",
                    label: "销售管理",
                    path: '/sell',
                    children: [
                        {
                            path: '/salesdelivery',
                            name: "salesdelivery",
                            label: "销售订单管理",
                            icon: "s-management",
                            url: "销售管理 / 销售订单管理"
                        },
                        {
                            path: '/salesreturn',
                            name: "salesreturn",
                            label: "销售退货",
                            icon: "s-release",
                            url: "销售管理 / 销售退货"
                        },
                    ]
                },{
                    icon: "s-finance",
                    label: "财务管理",
                    path: '/finance',
                    children: [
                        {
                            path: '/shouldpay',
                            name: "shouldpay",
                            label: "应付账单",
                            icon: "files",
                            url: "财务管理 / 应付账单"
                        },
                        {
                            path: '/shouldreceive',
                            name: "shouldreceive",
                            label: "应收账单",
                            icon: "receiving",
                            url: "财务管理 / 应收账单"
                        },
                    ]
                },
                
            ]
        };
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        clickMenu(item){
            this.$store.commit('url',item.url)
            console.log(item);
            this.$router.push({
                name:item.name
            })
        },
        clicSubkMenu(subItem){
            this.$router.push({
                name:subItem.name
            })
            this.$store.commit('url',subItem.url)
            console.log(subItem)
        },
        
    },
    mounted(){
        
    },
    computed: {
        noChildren() { return this.menu.filter(item => !item.children) },
        hasChildren() { return this.menu.filter(item => item.children) },
        isCollapse() {return this.$store.state.tab.isCollapse}
    }
}
</script>


<style lang="less" scoped>
body{
    overflow:hidden;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
    line-height: 48px;
}

.el-menu {
    height: 100vh;
    border: none;
}
.head{
    
    color: #fff;
    text-align: center;
    margin-top: 20px;
    margin-right: 20px;
    img{
        width: 30px;
        vertical-align:top;
        padding-right:5px;
        margin-top: 3px;
    }
    h3{
        display: inline-block;
    }
}
</style>